<template>
	<div class="user">
		<div class="contentMain">			
			<div class="title">
				<span>菜单管理</span>
			</div>
			<div class="main">
				<div class="main-right" ref="mainRight">
					<div class="searchValue">
						<div class="leftBtn">
							<el-input
								placeholder="请输入菜单标题"
								size="mini"
								v-model="searchValue">
								<i slot="prefix" class="el-input__icon el-icon-Ssearch"></i>
							</el-input>
							<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button>
						</div>
						<div class="rightBtn">
							<el-button v-for="(v,i) in headerBtnbottomRight" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="addMenuhandClick(i)">
								<span v-if="v.title">{{ v.title }}</span>
							</el-button>
						</div>
					</div>
					<div class="content">
						<el-table :data="tableData" 
						row-key='id'
						:default-expand-all="isExpandAll"
						:expand-row-keys="expandedRowKeys"
						@row-dblclick="handledbRow"
						:style="{ width: windowWidth + 'px' }"
						:tree-props="{children: 'children',hasChildren:true}"
						>
						<!-- 树形展开图标列 -->
							<el-table-column label="菜单名称" prop="label" width="168"></el-table-column>
							<el-table-column fixed="left" label="序号" type="index"></el-table-column>
							<el-table-column label="图标" prop="icon" align="center" width="66">
								<template slot-scope="scope">
									<i :class="scope.row.icon" style="font-size: 18px;"></i>
								</template>
							</el-table-column>
							<el-table-column label="排序号" prop="order" align="center"></el-table-column>
							<el-table-column label="类型" prop="type" align="center">
								<template slot-scope="scope">
								  <el-tag v-if="scope.row.type === 'M'" type="success" size="mini">{{ scope.row.type === 'M' ? '目录' : scope.row.type === 'C' ? '菜单' : '按钮' }}</el-tag>
								  <el-tag v-else-if="scope.row.type === 'C'" type="warning" size="mini">{{ scope.row.type === 'M' ? '目录' : scope.row.type === 'C' ? '菜单' : '按钮' }}</el-tag>
								  <el-tag else size="mini">{{ scope.row.type === 'M' ? '目录' : scope.row.type === 'C' ? '菜单' : '按钮' }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column v-for="(col, inx) in tableRows" :key="inx" border='false' :type="col.type" :prop="col.prop" :label="col.name" 
							:width="columnWidth(col, tableData)"></el-table-column>
							<!-- edit -->
							<el-table-column fixed="right" label="操作" width="88" align="center">
								<template slot-scope="scope">
								  <div class="editbox" style="display: flex;justify-content: center;">
									  <el-link style="font-size:12px;" size="mini" @click="handleEdit(scope.row)">编辑</el-link>
									  <el-link style="font-size:12px;margin-left: 8px;" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-link>
								  </div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="foot">
						<!-- 分页 -->
						<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageNum"
						:page-sizes="[5, 10, 20]"
						:page-size="pageSize"
						:total="totalSize"
						layout="total, sizes, prev, pager, next, jumper"
						background
						>
						</el-pagination>
					</div>
				</div>
			</div>
			<!-- 新增Model -->
			<div class="addMenuDiglog">
				<el-dialog title="新增菜单" :visible.sync="addMenuDialog" width="28%" :modal="false" :before-close="handleClose">
				  <!-- 表单 -->
					<el-form ref="form" :model="addForm" label-width="88px" size="mini">
					<el-row :gutter="20">
						  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
							  <!-- input -->
							  <el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
								<el-input :suffix-icon='v.prefix' v-model="$data.addForm[v.modelValue]" :placeholder="v.placeholder" 
								@focus='OpenIconsFocus(v,i)'
								></el-input>
								<!-- icon自选区域 -->
								<el-dialog
								  title="选择一个菜单图标"
								  :visible.sync="OpenIcons"
								   width="48%" :modal="false"
								  :before-close="handleIconClose">
								  <div class="icon-list">
								        <div
								          v-for="(v, index) in icons"
								          :key="index"
										  :value="v"
								          class="icon-item"
								          @click="selectIcon(v)"
								        >
								           <i :class="v.icon" style="font-size: 18px;"></i>
										   <span style="font-size: 12px;">{{v.title}}</span>
								        </div>
								   </div>
								</el-dialog>
							  </el-form-item>
							  <!-- select -->
							  <el-form-item v-if="v.type == 'MenuSelect'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.addForm[v.modelValue]" filterable :placeholder="v.placeholder" @focus="sname(v,i)" @change="scsname">
									<el-option v-for="(item,index) in $data[v.op]" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"> 
									<span style="float: center;font-size: 12px">{{ item.label }}</span></el-option>
								</el-select>
							  </el-form-item>
							  <el-form-item v-if="v.type == 'firstSelect'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.addForm[v.modelValue]" filterable :placeholder="v.placeholder" :disabled="Pidisabled" @focus="sname(v,i)" @change="scname">
									<el-option v-for="item in $data[v.op]" :key="item.label" :label="item.label" :value="item.id"> 
									<span style="float: center;font-size: 12px">{{ item.label }}</span></el-option>
								</el-select>
							  </el-form-item>
							  <el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
									<el-select v-model="$data.addForm[v.modelValue]" filterable :placeholder="v.placeholder" @focus="sname(v,i)" @change="scsname">
										<el-option v-for="(item,index) in $data[v.op]" :key="index" :label="item.label" :value="item.id" :disabled="item.disabled"> 
										<span style="float: center;font-size: 12px">{{ item.label }}</span></el-option>
									</el-select>
							  </el-form-item>
							  <!-- inputNumber -->
							  <el-form-item v-if="v.type == 'inputNumber'" :label="v.label" :prop="v.modelValue">
								<el-input-number v-model="$data.addForm[v.modelValue]" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
							  </el-form-item>
						  </el-col>
						</el-row>
					</el-form>
				  <span slot="footer" class="dialog-footer">
				    <el-button type="primary" @click="submit" size="mini">确 定</el-button>
				    <el-button @click="addMenuDialog = false" size="mini">取 消</el-button>
				  </span>
				</el-dialog>
			</div>
			<!-- 修改Model -->
			<div class="editMenuDiglog">
				<el-dialog title="修改菜单" :visible.sync="editMenuDialog" width="28%" :modal="false" :before-close="handleClose">
					<el-form ref="form" :model="editForm" label-width="88px" size="mini">
					<el-row :gutter="20">
						<el-col :span="v.spanRows" type="flex" v-for="(v,i) in editFormType" :key="i">
							<!-- input -->
							<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
								<el-input :suffix-icon='v.prefix' v-model="$data.editForm[v.modelValue]" :placeholder="v.placeholder"
								@focus='OpenIconsFocus(v,i)'
							></el-input>
							<!-- icon自选区域 -->
							<el-dialog
							  title="选择一个菜单图标"
							  :visible.sync="OpenIcons"
							   width="48%" :modal="false"
							  :before-close="handleClose">
							  <div class="icon-list">
							        <div
							          v-for="(v, index) in icons"
							          :key="index"
									  :value="v"
							          class="icon-item"
							          @click="editSelectIcon(v)"
							        >
							           <i :class="v.icon"></i>
									   <span style="font-size: 12px;">{{v.title}}</span>
							        </div>
							   </div>
							</el-dialog>
							</el-form-item>
							<!-- select -->
							<el-form-item v-if="v.type == 'MenuSelect'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.editForm[v.modelValue]" filterable :placeholder="v.placeholder" @focus="sname(v,i)" @change="scname">
									<el-option v-for="item in $data[v.op]" :key="item.label" :label="item.label" :value="item.id"> 
									<span style="float: center;font-size: 12px">{{ item.label }}</span></el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="v.type == 'firstSelect'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.editForm[v.modelValue]" filterable :placeholder="v.placeholder" @focus="sname(v,i)" @change="scname">
									<el-option v-for="item in $data[v.op]" :key="item.label" :label="item.label" :value="item.id"> 
									<span style="float: center;font-size: 12px">{{ item.label }}</span></el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.editForm[v.modelValue]" filterable :placeholder="v.placeholder" @focus="sname(v,i)" @change="scsname">
									<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id" :disabled="item.disabled"> 
									<span style="float: center;font-size: 12px">{{ item.label }}</span></el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-if="v.type == 'inputNumber'" :label="v.label" :prop="v.modelValue">
								<el-input-number v-model="$data.editForm[v.modelValue]" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
							</el-form-item>
						  </el-col>
					</el-row>
				</el-form>
					<span slot="footer" class="dialog-footer">
					  <el-button type="primary" @click="editSubmit" size="mini">确 定</el-button>
					  <el-button @click="editMenuDialog = false" size="mini">取 消</el-button>
					</span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	// selfs / sons
	import Pinyin from "@/external/pinyin.js";
	import AccType from './AddType.js'
	import editType from './editType.js'
	import elMenus from '@/external/elMenus.js'
	import icons from '@/external/icons.js'
	// import * as echarts from "echarts";
	// 接口
	import { addMenu , AllMenu , removeMenu , editMenu } from "@/api/user.js";
	export default {
		inject: ['reload'], // 无痕刷新
		components: {
			
		},
		data() {
			return {
				idx:'',
				filterText:'',
				searchValue: '',
				selectValue: '',
				loading: false,
				disabled: true,
				Pidisabled: true, //父级菜单id禁用
				addMenuDialog: false,
				editMenuDialog: false,
				OpenIcons:false, //icons选择
				// 是否展开，默认全部展开
				isExpandAll: false,
				expandedRowKeys: [], // 用于存储默认展开的行的 id
				windowWidth: '',
				pageNum: 1, //当前页currentPage
				pageSize: 8,
				totalSize: 10, //总条数
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				options: [{value: '可用',label: '可用'},{value: '禁用',label: '禁用'}],
				menuTypeOptions:[
					{id:1,label: '目录',value: 'M'},{id:2,label: '菜单',value: 'C'},{id:3,label: '按钮',value: 'F'}
				],
				// header查询重置按钮
				headerBtn:[{ title:"刷新", icon:"el-icon-refresh" }],
				headerBtnbottomRight:[{ title:"新增", icon:"el-icon-plus",type:'primary' },{ icon:"el-icon-refresh" },{ icon:"el-icon-s-tools" },{ icon:"el-icon-full-screen" }],
				edits:[{ title:"修改",type:'primary' },{ title:"新增",type:'primary' },{ title:"删除",type:'danger' },],
				// 表格行
				tableRows:[
					{ name:"权限标识", prop:"permission", type:"" },{ name:"路由地址", prop:"path", type:"" },
					{ name:"组件名称", prop:"component", type:"" },{ name:"创建时间", prop:"createTime", type:"" }
				],
				// 表单
				formType:[],
				editFormType:[],
				// icons
				icons:[],
				// 表格data
				tableData:[],
				elMenusOption:[], //菜单名称选择
				selectOptions:[],
				// 修改表单
				editForm:{
					menuId:'', //菜单id
					menuName:'', //菜单名称
					perms:'', // 标识符
					parentId:'', //菜单父id => 上级菜单
					type:'', //菜单类型（M目录 C菜单 F按钮）
					component:'', //组件名称
					icon:'', //菜单icon
					orderNum:'', //排序号
					path:'', //菜单路径
				},
				addForm:{
					menuName:'', //菜单名称
					perms:'', // 标识符
					parentId:'', //菜单父id => 上级菜单
					type:'', //菜单类型（M目录 C菜单 F按钮）
					component:'', //组件名称
					icon:'', //菜单icon
					orderNum:'', //排序号
					path:'', //菜单路径
				},
			}
		},
		mounted() {
			// 左侧提交表单
			this.formType = AccType.map(function(v) { return v })
			// 左侧修改提交表单
			this.editFormType = editType.map(function(v) { return v })
			// 获取会话存储从钩子函数上获取到数据
			this.loadData();
			// this.tableData = JSON.parse(sessionStorage.getItem('menus'))
			//获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
			this.$nextTick(()=>{
				this.updateWindowWidth();
				window.addEventListener('resize', this.updateWindowWidth);
			})
		},
		watch: {
		  filterText(val) {
			this.$refs.tree.filter(val);
		  }
		},
		methods:{
			async loadData(){
				// 所有菜单
				let res = await AllMenu();
				this.tableData = res.rows.children;
				this.totalSize = res.total
				// 将菜单里还未新增之前的数据源存放于会话，以便角色默认使用。
				// sessionStorage.setItem('MenuForRoleItems', JSON.stringify(this.tableData));
				// 保存菜单数据到sessionStorage
				sessionStorage.setItem('MenuForRoleItems', JSON.stringify(this.tableData));
			},
			//  select聚焦
			async sname(v,i) {
				// v.id = i;
				this.idx = i;
				// i event
				switch (i) {
					case 0:
					console.log(this.addForm.type)
					break;
					case 1:
						// 父级菜单Id
						let res = await AllMenu();
						this.selectOptions = res.rows.children
						console.log(this.addForm.type)
						if(this.addForm.type === 'M'){
							this.selectOptions = this.tableData.map(obj => {
							  // 创建一个新的对象，将 name 替换为 label，并保留其他字段
							  return { label: obj.name , ...obj };
							});
						}else if(this.addForm.type === 'C'){
							this.selectOptions = this.flattenChildren(this.tableData);
							console.log(this.selectOptions);
							// 使用 map 方法替换字段名 name 为 label
							this.selectOptions = this.selectOptions.map(obj => {
							  // 创建一个新的对象，将 name 替换为 label，并保留其他字段
							  return { label: obj.name , ...obj };
							});
						}else{
							this.selectOptions = this.processMenuData(this.tableData);
							// 使用 map 方法替换字段名 name 为 label
							this.selectOptions = this.selectOptions.map(obj => {
							  // 创建一个新的对象，将 name 替换为 label，并保留其他字段
							  return { label: obj.name , ...obj };
							});
						}
						break;
					case 2:
						this.elMenusOption = this.flattenChildren(elMenus);
						let filterMenus = this.flattenChildren(this.tableData);
						// 创建一个 Set 来存储 选择框中 已有的 name
						let namesInB = new Set(filterMenus.map(item => item.label));
						// 遍历 elMenusOption，判断是否有相同的 name，并新增字段 j
						this.elMenusOption = this.elMenusOption.map(item => {
						  if (namesInB.has(item.label)) {
						    return { ...item, disabled: true };
						  }
						  return item;
						});
						break;
				}
			},
			// 新增等按钮
			addMenuhandClick(i){
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 ==> 新增
						this.addMenuDialog = true;
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			// SelectVal to editForm
			scname(val){
				console.log(val,this.idx);
				// i event
				switch (this.idx) {
					case 0:
					// 处理索引0的逻辑 ==> 新增
					if(val == 1){
						this.editForm.type = 'M'
					}else if(val == 2){
						this.editForm.type = 'C'
					}else{
						this.editForm.type = 'F'
					}
					break;
					case 1:
						let qwer = this.findObjectByCode(this.selectOptions, val);
						console.log(qwer)
					break;
				}
			},
			// SelectVal to editForm
			scsname(val){
				switch (this.idx) {
					case 0:
					if(val == 'M'){
						this.Pidisabled = true;
						this.addForm.parentId = 0
						this.formType[2].type = 'input'
						this.formType[2].label = '目录名称'
						this.formType[3].label = '目录图标'
						this.formType[4].label = '目录路径'
					}else if(val == 'C'){
						this.Pidisabled = false;
						this.formType[2].type = 'select'
						this.formType[2].label = '菜单名称'
						this.formType[3].label = '菜单图标'
						this.formType[4].label = '菜单路径'
					}else{
						this.Pidisabled = false;
						this.formType[2].type = 'input'
						this.formType[2].label = '按钮名称'
						this.formType[3].label = '按钮图标'
						this.formType[4].label = '按钮路径'
					}
					break;
				}
				let a = this.elMenusOption.map(item =>{
					if(item.id == val){
						this.addForm.path = item.path
						this.addForm.icon = item.icon
						this.addForm.menuName = item.label
						item.component == undefined || item.component =='' ?  this.addForm.component = 'Layout' : this.addForm.component = item.component
					}
				})
			},
			// 提交
			async submit(){
				console.log(this.addForm);
				let rs = await addMenu(this.addForm);
				if (rs.code === 200) {
					this.$message({ type: 'success', message: '菜单新增成功！'});
					//更新数据源
					this.loadData();
					this.addMenuDialog = false
					// 动态设置默认展开的行
					this.expandedRowKeys.push(this.editForm.menuId); // 设置默认展开的行的 id
					this.editMenuDialog = false;
				} else {
					this.$message.error(rs.message)
				}
			},
			/*
				about tree
			*/
			handleNodeClick(data,e) {
				this.CatalogueName = data.title
				this.iconComes = 'el-icon-' + this.makePy(data.label)
				// this.loadData();
			},
			// 过滤器
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			handleIconClose(done){
				done();
			},
			handleClose(done) {
				this.$confirm('关闭会清空已选择的数据，确认关闭？')
				  .then(_ => {
					// 先重置表单
					 this.$nextTick(() => {
					    this.$refs['addForm'].resetFields(); // 等待 DOM 更新后重置
					});
					// 再执行关闭
					setTimeout(() => done(), 0); // 确保重置完成后再关闭
				  })
				  .catch(_ => {});
			},
			// 递归二级children
			extractSecondLevelChildren(data) {
			  const result = [];
			  data.forEach(item => {
				if (item.children && item.children.length > 0) {
				  result.push(...item.children);
				}
			  });
			  return result;
			},
			// 递归三级children
			extractLeafChildren(data) {
			    const result = [];
			    data.forEach((item) => {
			    if (item.children && item.children.length > 0) {
			        // 递归提取子级
			        result.push(...this.extractLeafChildren(item.children));
			    } else {
			        // 当前节点没有 children 或 children 为空，视为叶节点
			        result.push(item);
			    }
			    });
			    return result;
			},
			// 递归三级children => 不包含type=f 按钮的
			processMenuData(data) {
			  const result = [];
			  function traverse(item) {
			    // 创建一个新的对象，避免修改原始数据
			    const newItem = { ...item };
			    delete newItem.children; // 删除 children 字段
			    // 如果当前项的 type 不是 'F'，则添加到结果数组中
			    if (item.type !== 'F') {
			      result.push(newItem);
			      // 如果有 children 且 type 不是 'F'，则递归处理子项
			      if (item.children && item.children.length > 0) {
			        item.children.forEach(child => {
			          traverse(child);
			        });
			      }
			    }
			  }
			
			  // 遍历根节点
			  data.forEach(node => {
			    traverse(node);
			  });
			
			  return result;
			},
			// 递归查找函数 2
			findObjectByCode(arr, targetCode) {
			  for (const obj of arr) {
			    // 检查当前对象的 areaCode 是否匹配
			    if (obj.id === targetCode) {
			      return obj; // 找到目标，直接返回
			    }
			    // 如果存在子节点（假设子节点存储在 children 属性中），递归查找
			    if (obj.children && obj.children.length > 0) {
			      const found = this.findObjectByCode(obj.children, targetCode);
			      if (found) {
			        return found; // 子节点中找到目标，逐层返回
			      }
			    }
			  }
			  return null; // 遍历完未找到
			},
			// 计数器
			 handleChange(value) {
			
			},
			//  icons聚焦
			OpenIconsFocus(v,i){
				// v.id = i;
				// this.idx = i;
				// i event
				switch (i) {
					case 3:
					// 打开菜单icon选择model
					this.OpenIcons = true;
						this.icons = icons.map(function(v) {
						return v
					})
					break;
				}
			},
			// icon选择 => 新增
			selectIcon(v) {
				this.addForm.icon = v.icon
				this.OpenIcons = false
			},
			// icon选择 => 修改
			editSelectIcon(v) {
				this.editForm.icon = v.icon
				this.OpenIcons = false
			},
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 页面刷新
						this.loading = true;
						setTimeout(() => {
							this.reload();
							this.$message({type:'success',message:'已刷新'})
							this.loading = false;		
						}, 1500)
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			
			// col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
			     let prop = col.prop,lab = col.lab;
			     let width = 20; // 设定一个最小值
			     let maxlenStr = ""; // 最长字符串
			     for (let info of list) {
			       if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			     }
			     width = Math.max(width, len(lab), len(maxlenStr));
			     // 表格自带的内边距(20px) 自调
				 
			     return width + 8; // 这里加了 12px
			     function len(str) {
			       // 实际分配长度可根据需要自行调整
			       let length = 0;
			       for (const char of str + "") {
					// 英文小写字符 8px
					 if ("a" <= char && char <= "z") length += 8;
			         // 英文小写字符 8px
			         if ("a" <= char && char <= "z") length += 8;
			         // 英文大写字符 12px
			         else if ("A" <= char && char <= "Z") length += 8;
			         // 中文字符 16px
			         else if (char >= "\u4e00" && char <= "\u9fa5") length += 24;
			         // 其他 8px
			         else length += 8;
			       }
			       return length;
			    }
			},
			// db events
			handledbRow(row, column, event){
				
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				this.pageNum = val;
				this.loadData();
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				this.pageNum = val;
				this.loadData();
			},
			// 实时宽度
			updateWindowWidth() {
			    this.windowWidth = window.innerWidth - 228;
			},
			toggleExpand(row) {
				 this.$refs.table.toggleRowExpansion(row);
				 row.expanded = !row.expanded
			},
			// 表格编辑栏
			handleEdit(row) {
				// row=row.map((v)=>{return { menuName:v.label,...v }})
			 // 处理索引0的逻辑 ==> 修改
			 console.log(row,'kkkkkkkkkkkkkk');
				this.editMenuDialog = true;
				// this.editForm = { menuName:row.label,...row };
				this.editForm.perms = row.permission
				this.editForm.parentId = row.parentId
				this.editForm.menuId = row.id
				this.editForm.menuName = row.label
				this.editForm.type = row.type
				
			},
			// 修改提交
			async editSubmit(){
				console.log(this.editForm);
				let rs = await editMenu(this.editForm);
				if (rs.code === 200) {
					this.$message({
						type: 'success',
						message: '菜单修改成功！',
					});
					//更新数据源
					this.loadData();
					// 动态设置默认展开的行
					this.expandedRowKeys.push(this.editForm.menuId); // 设置默认展开的行的 id
					this.editMenuDialog = false;
				} else {
					this.$message.error(rs.message)
				}
			},
			//删除菜单
			handleDelete(id) {
			  this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
			    confirmButtonText: "确定",
			    cancelButtonText: "取消",
			    type: "warning",
			  }).then(async() => {
					let res = await removeMenu({ menuIds:id })
					if (res.code === 200) {
				    this.$message({type: "success", message: res.message});
				    this.loadData(); //重新加载数据页面
					} else {
					this.$message({type: "error", message: res.message});
					}
				}).catch(() => {
			      this.$message({type: "error", message: '取消'});
			    });
			},
			// 数组扁平化
			flattenChildren(data) {
			  const result = []; // 用于存储提取的数据
			
			  // 递归函数
			  function traverse(node) {
			    // 如果当前节点的 type 不是 'F'，则处理该节点
			    if (node.type !== 'F') {
			      // 将当前节点添加到结果数组中
			      const newNode = { ...node };
			      delete newNode.children; // 删除 children 字段
			      result.push(newNode);
			
			      // 如果当前节点有 children，递归处理子节点
			      if (node.children && node.children.length > 0) {
			        node.children.forEach(child => {
			          traverse(child);
			        });
			      }
			    }
			  }
			
			  // 遍历根节点
			  data.forEach(node => {
			    traverse(node);
			  });
			
			  return result;
			},
		},
		watch: {
			windowWidth(newVal) {
			  // 在这里执行逻辑，例如重新布局等。
			}
		}
	}
</script>

<style lang="less" scoped>
	// 穿透
	/deep/ .el-dialog__header{
		padding: 12px;
		background-color: #007bb0;
	}
	/deep/ .el-dialog__title{
		font-size: 12px;
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	.user{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.contentMain{
		
			.title{
				height: 40px;
				line-height: 40px;
				span{
					font-weight: 300;
					margin-left: 12px;
				}
			}
			.main{
				width: 100%;
				margin-top: 8px;
				display: flex;
				.main-right{
					margin-left: 12px;
					.searchValue{
						display: flex;
						justify-content: space-between;
						/deep/ .el-input{
							width: 188px;
						}
						/deep/ .el-select{
							margin-left: 8px;
						}
						/deep/ .el-button{
							margin-left: 8px;
						}
						.leftBtn{
							// display: flex;
							// justify-content: space-around;
						}
					}
					.content{
						display: flex;
						justify-content: center;
						// height: 430px;
						width: 100%;
						margin-top: 12px;
						border: 1px solid #dddddd;
						border-radius: 4px;
						/deep/ .el-table .cell{
							font-size: 12px;
							// text-align: left;
							height: 40px;
							line-height: 40px;
						}
						/deep/ .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
							border: 0;
						}
						/deep/ .el-table{
							background-color: #fff;
						}
						/deep/ td {
							padding: 0!important;
							height: 32px;
						}
						/deep/ .el-table td.el-table__cell div :first-child{
							text-align: center;
						}
						
					}
					.foot{
						display: flex;
						justify-content: flex-end;
						margin-top: 8px;
					}
					
				}
			}
			.addMenuDiglog{
				.icon-list {
				  display: flex;
				  flex-wrap: wrap;
				  justify-content: space-around;
					.icon-item {
					  display: flex;
					  justify-content: center;
					  flex-direction: column;
					  align-items: center;
					  width: 58px;
					  height: 58px;
					  border: 1px solid #007bb0;
					  color: #007bb0;
					  border-radius: 4px;
					  cursor: pointer;
					  span{
						  font-size: 10px;
					  }
					}
					.icon-item:hover {
					  background-color: #007bb0;
					  color: #fff;
					}
				}
			}
			.editMenuDiglog{
				.icon-list {
				  display: flex;
				  flex-wrap: wrap;
				  justify-content: space-around;
				}
				.icon-item {
				  display: flex;
				  justify-content: center;
				  flex-direction: column;
				  align-items: center;
				  width: 58px;
				  height: 58px;
				  border: 1px solid #007bb0;
				  color: #007bb0;
				  border-radius: 4px;
				  cursor: pointer;
				  span{
					  font-size: 10px;
				  }
				}
				.icon-item:hover {
				  background-color: #007bb0;
				  color: #fff;
				}
			}
		}
	}
</style>